import { BidirectionalBar, BidirectionalBarConfig } from '@ant-design/charts';
import React, { useEffect, useState } from 'react';
import fetchTransactionStatisticsData from '../mockData/transactionStatisticsData';
import { Card } from 'antd';
import { formatNum } from '@/utils/mathUtils';

type DataType = {
  type: string;
  count: number;
  amount: number;
};

const tabListNoTitle = [
  {
    key: 'today',
    label: '当日交易统计',
    tab: '当日交易统计',
  },
  {
    key: 'week',
    label: '最近一周交易统计',
    tab: '最近一周交易统计',
  },
  {
    key: 'month',
    label: '最近一月交易统计',
    tab: '最近一月交易统计',
  },
  {
    key: 'year',
    label: '最近一年交易统计',
    tab: '最近一年交易统计',
  },
];

const TransactionStatistics: React.FC = () => {
  const [data, setData] = useState<DataType[]>([]);
  const [transStatisCycle, setTransStatisCycle] = useState<string>('today');

  useEffect(() => {
    const data = fetchTransactionStatisticsData(transStatisCycle);
    setData(data);
  }, [transStatisCycle]);

  const config: BidirectionalBarConfig = {
    appendPadding: 16,
    data,
    layout: 'vertical',
    xField: 'type',
    yField: ['count', 'amount'],
    meta: {
      count: {
        alias: '交易笔数',
        // 数值格式化为千分位
        formatter: (v) => formatNum(v),
      },
      amount: {
        alias: '交易金额（万元）',
        // 数值格式化为千分位
        formatter: (v) => formatNum(v),
      },
    },
    label: {
      position: 'top',
      style: {
        fontWeight: 800,
        stroke: '#fff',
        lineWidth: 2,
      },
    },
    tooltip: {
      shared: true,
      showMarkers: false,
    },
  };

  return (
    <Card
      size="small"
      tabList={tabListNoTitle}
      bordered={false}
      activeTabKey={transStatisCycle}
      onTabChange={(key: string) => {
        setTransStatisCycle(key);
      }}
    >
      <BidirectionalBar {...config} />
    </Card>
  );
};
export default TransactionStatistics;
